<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like" data-href="http://elymentree.com" data-send="true" data-layout="button_count" data-width="400" data-show-faces="true" data-font="trebuchet ms"></div>
<?php
include_once("includes/header.php");
//$profilePhoto = file_exists(DOC_ROOT.'media/images/profile.jpg') ? WEB_ROOT . 'media/images/profile.jpg' : WEB_ROOT . 'media/system/defaultprofile.png'  ;
$settings = new SETTINGS(1);
?>
<style>
BODY{ background:<?=$settings->getVar('bgcolor')?>}

#container
{
  	
}

#head
{ 
   width:auto; height:290px;
   padding:10px;
}

#headSlider{
	position:relative;
	left:420px;
	bottom:240px;
}


#headTitle{
	position:relative;
	right:300px;
	top:100px;
	
	z-index:1;
	color:<?=$settings->getVar('titlecolor')?>;
	font:100px 'Tangerine', serif;
	text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);

	}
	
#headSubTitle
{ 
    position:relative;
	top:50px;
    
    font-family:Verdana, Geneva, sans-serif;
	font-size:20px;
	color:<?=$settings->getVar('subtitlecolor')?>;
}
</style>    
<div id="container"> 
    <div id="head">
    <h1 id="headTitle"><?=$settings->getVar('title')?></h1>
        <span id="headSubTitle"><?=$settings->getVar('subtitle')?></span>	
    <div id="headSlider" >
          <div id='coin-slider'>
                                    <?php 
                                        for($i=1; $i<=5; $i++)
                                        {
                                    ?> 
                                    <a href="">
                                        <img src='media/images/gallery/<?=$i?>.jpg' >
                                        <span>
                                          <?="Photo " . $i?>
                                        </span>
                                     </a>
                                     <?php } ?>
             </div>
         </div>
         
    </div>
<div id="one">
        <ol>
                <li>
                   <?php
                     $slide1 = new MAIN('slides','slidelocation',1);
					?>
                    <h2><span><?=$slide1->getVar('slidetitle')?$slide1->getVar('slidetitle'):'title goes here'?></span></h2>
                    <div style="overflow:auto; background:<?=$slide1->getVar('bgcolor')?>; padding:5px">
                        <figure>
                                   <div id="profilePage" style="padding:5px;">
                                   <img src="<?=WEB_ROOT.'media/images/gallery/1.jpg'?>" alt="photo 1" style="float:left; padding:10px;" width="25%"/>
                                   </div> 
                                  <div style="text-align:justify; padding:10px">
								   <?=stripslashes($slide1->getVar('content'));?>
                                  </div>
                        </figure>
                    </div>
                </li>	
          <li>
                    <?php
                     $slide2 = new MAIN('slides','slidelocation',2);
					?>
                    <h2><span><?=$slide2->getVar('slidetitle')?$slide2->getVar('slidetitle'):'title goes here'?></span></h2>
                    <div style="overflow:auto; background:<?=$slide2->getVar('bgcolor')?>; padding:5px">
                        <figure>
                                   <div id="profilePage" style="padding:5px;">
                                   <img src="<?=WEB_ROOT.'media/images/gallery/2.jpg'?>" alt="photo 2" style="float:left; padding:10px;" width="25%"/>
                                   </div> 
                                  <div style="text-align:justify; padding:10px">
								   <?=stripslashes($slide2->getVar('content'));?>
                                  </div>
                        </figure>
                    </div>
                </li>
                
                <li>
                     <?php
                     $slide3 = new MAIN('slides','slidelocation',3);
					?>
                    <h2><span><?=$slide3->getVar('slidetitle')?$slide3->getVar('slidetitle'):'title goes here'?></span></h2>
                    <div style="overflow:auto; background:<?=$slide3->getVar('bgcolor')?>; padding:5px">
                        <figure>
                                   <div id="profilePage" style="padding:5px;">
                                   <img src="<?=WEB_ROOT.'media/images/gallery/3.jpg'?>" alt="photo 3" style="float:left; padding:10px;" width="25%"/>
                                   </div> 
                                  <div style="text-align:justify; padding:10px">
								   <?=stripslashes($slide3->getVar('content'));?>
                                  </div>
                        </figure>
                    </div>
                </li>
                <li>
                     <?php
                     $slide4 = new MAIN('slides','slidelocation',4);
					?>
                    <h2><span><?=$slide4->getVar('slidetitle')?$slide4->getVar('slidetitle'):'title goes here'?></span></h2>
                    <div style="overflow:auto; background:<?=$slide4->getVar('bgcolor')?>; padding:5px">
                        <figure>
                                   <div id="profilePage" style="padding:5px;">
                                   <img src="<?=WEB_ROOT.'media/images/gallery/4.jpg'?>" alt="photo 4" style="float:left; padding:10px;" width="25%"/>
                                   </div> 
                                  <div style="text-align:justify; padding:10px">
								   <?=stripslashes($slide4->getVar('content'));?>
                                  </div>
                        </figure>
                    </div>
                </li>
                <li>
                     <?php
                     $slide5 = new MAIN('slides','slidelocation',5);
					?>
                    <h2><span><?=$slide5->getVar('slidetitle')?$slide5->getVar('slidetitle'):'title goes here'?></span></h2>
                    <div style="overflow:auto; background:<?=$slide5->getVar('bgcolor')?>; padding:5px">
                        <figure>
                                   <div id="profilePage" style="padding:5px;">
                                   <img src="<?=WEB_ROOT.'media/images/gallery/5.jpg'?>" alt="photo 5" style="float:left; padding:10px;" width="25%"/>
                                   </div> 
                                  <div style="text-align:justify; padding:10px">
								   <?=stripslashes($slide5->getVar('content'));?>
                                  </div>
                        </figure>
                    </div>
                </li>
            </ol>
            <noscript>
                <p>Please enable JavaScript to get the full experience.</p>
            </noscript>
        </div>
</div>        

    <script>
            (function($, d) {
                // please don't copy and paste this page
                // it breaks my analytics!

                // demos
                $('#one').liteAccordion({
                        onTriggerSlide : function() {
                            this.find('figcaption').fadeOut();
                        },
                        onSlideAnimComplete : function() {
                            this.find('figcaption').fadeIn();
                        },
                        autoPlay : false,
                        pauseOnHover : true,
                        theme : '<?=$settings->getVar('theme')?>',
                        rounded : true,
                        enumerateSlides : true
                }).find('figcaption:first').show();
                $('#two').liteAccordion();
                $('#three').liteAccordion({ theme : 'dark', rounded : true, enumerateSlides : true, firstSlide : 2, linkable : true, easing: 'easeInOutQuart' });
                $('#four').liteAccordion({ theme : 'light', firstSlide : 3, easing: 'easeOutBounce', activateOn: 'mouseover' });

                // social links
                var js, id = 'facebook-jssdk';

                if (d.getElementById(id)) return;

                js = d.createElement('script');
                js.id = id;
                js.async = true;
                js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                d.getElementsByTagName('head')[0].appendChild(js);

                // Load Plus One Button
                jQuery.getScript('https://apis.google.com/js/plusone.js');
                // Load Tweet Button Script
                jQuery.getScript('https://platform.twitter.com/widgets.js');
                // Load LinkedIn button
                jQuery.getScript('https://platform.linkedin.com/in.js?v=2');
            })(jQuery, document);

            // analytics
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-17442910-1']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
			
          </script>
          <script type="text/javascript">
				$(document).ready(function() {
					$('#coin-slider').coinslider();
		});
		</script>

    </body>
</html>